-
Notifications
You must be signed in to change notification settings - Fork 14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat add invitation banner for landing page #3431
base: feat/landing-page
Are you sure you want to change the base?
feat add invitation banner for landing page #3431
Conversation
strzelec seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account. You have signed the CLA already but the status is still pending? Let us recheck it. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What a nice component @adam-strzelec 🙌
Design wise seem to be looking as expected
Left a veeeery tiny refactoring comment 😁
But nice job 🎉
<p className="mt-2 text-sm font-normal"> | ||
{formatText({ | ||
id: | ||
coloniesRemaining > 0 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's refactor this into a constant const hasColoniesRemaining = coloniesRemaining > 0
and use it here
: 'landingPage.invitationBanner.descriptionNoRemaining', | ||
})} | ||
</p> | ||
{coloniesRemaining > 0 && ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's use hasColoniesRemaining
also here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry @adam-strzelec on a second look I found some small mismatches with Figma
return ( | ||
<div className="w-full max-w-[31.25rem] rounded-2xl border px-6 py-6"> | ||
<div className="flex h-10 w-10 items-center justify-center rounded-md border"> | ||
<SmileySticker size={20} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually on a second look, I think this should be 24
<div className="flex h-10 w-10 items-center justify-center rounded-md border"> | ||
<SmileySticker size={20} /> | ||
</div> | ||
<h1 className="mb-[.625rem] mt-[.625rem] heading-4"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we use here my-2.5
)} | ||
</span> | ||
|
||
<p className="mt-2 text-sm font-normal"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
And I think we should also apply text-gray-700
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
{formatText({ id: 'landingPage.invitationBanner.title' })} | ||
</h1> | ||
<span className="rounded-xl bg-blue-100 px-3 py-1 text-sm font-medium text-blue-400"> | ||
{formatText( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we move all i18n strings into this component?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@adam-strzelec Thank you for the PR, and your work on the new landing page. Mostly looks good.
What I noticed is that the ticket icon is responsive, however, should be fixed. When using the full expected invite link, is aligns to the top and get squished. I have also exaggerated this with a really long invite link as well.
With the provided string
With the expected string
With an exaggerated string
@arrenv Good catch. I already fixed that with the rest of improvements. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@adam-strzelec Thank you, looks good now!
Description
Add colony invitation banner for landing page
Testing
Colony Invitation Banner
Diffs
New stuff ✨
Main issue - #3392